<template>
  <div class="register-container">
    <SubtitleTabs
        :tabs="tabs"
        @change="handleTabsChange"
    />
    <UserInfoBasic v-if="activeIndex === 0" />
    <UserInfoAccompany v-if="activeIndex === 1" />
    <UserInfoTravel v-if="activeIndex === 2" />
  </div>
</template>

<script>
import SubtitleTabs from "../../components/common/SubtitleTabs";
import UserInfoBasic from './UserInfoBasic'
import UserInfoAccompany from './UserInfoAccompany'
import UserInfoTravel from '../userInfoTravel'
export default {
  name: "faq",
  components: {SubtitleTabs, UserInfoBasic, UserInfoAccompany,UserInfoTravel},
  data() {
    return {
      tabs: ['个人资料', '随行嘉宾', '旅行信息'],
      activeIndex: 0
    }
  },
  // watch: {
  //   '$route': {
  //     handler: function (to, from) {
  //       console.log('----------router123----------')
  //     },
  //     immediate:true
  //   }
  // },
  mounted() {
    // location.reload()
  },
  methods: {
    handleTabsChange (index) {
      this.activeIndex = index
    }
  },

}
</script>

<style scoped>
.register-container {
  width: 800px;
  padding-top: 60px;
  padding-left: 120px;
  padding-bottom: 120px;
}

.group-title {
  height: 36px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: #333333;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #D7D7D7;
}
.group-title > img {
  cursor: pointer;
}

.user-base-item {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  padding: 16px 20px 0 0;
  display: flex;
  flex-direction: column;
}

.user-base-item > .name {
  font-size: 16px;
  line-height: 22px;
  color: #333333;
}


.user-base-item > .phone-number {
  font-weight: 200;
  font-size: 16px;
  line-height: 22px;
  color: #666666;
}

.user-info-box {
  width: 100%;
  display: flex;
}

.user-info-box > .left {
  width: 50%;
  border-right: 1px solid #D7D7D7;
}

.user-info-box > .right {
  width: 50%;
  padding-left: 40px;
  box-sizing: border-box;
}

.block-title {
  font-size: 16px;
  color: #333333;
  margin-top: 40px;
}
</style>
